<link rel="stylesheet" href="__CDN__/assets/addons/vuemagic/element/element.css">
<link rel="stylesheet" href="__CDN__/assets/addons/vuemagic/common.css">
<style>
    #groupIndex {
        background: #fff;
        padding: 0 20px 30px;
    }
    .status-normal{
        color: #6ACAA5;
    }
    .status-hidden{
        color: #C4C4C4;
    }

    [v-cloak] {
        display: none
    }
</style>

<script src="__CDN__/assets/addons/vuemagic/vue.js"></script>
<script src="__CDN__/assets/addons/vuemagic/element/element.js"></script>
<script src="__CDN__/assets/addons/vuemagic/moment.js"></script>
<div id="htmlIndex" v-cloak>

   <div class="screen-container">
        <div class="screen-container-show">
            <!--顶部选项卡一般status-->
            <div class="screen-container-left display-flex">
                <div class="order-refresh display-flex" @click="reqOrderList">
                    <i class="el-icon-refresh"></i>
                </div>
                

            </div>
            <!--顶部选项卡一般status 结束-->
            <!--自动展开的搜索列表-->
            <div class="screen-container-right display-flex">
                <div class="display-flex margin-right-20">
                   
                </div>
                    
                       <el-button type="primary" size="small" @click="baseAction('create',null)"><i class="el-icon-plus"></i> 新建</el-button>
                <template v-if="searchForm.status == 'nosend'">
                <!--可以修改此处逻辑用来安置自定义按钮-->
                    <div class="common-btn cursor-pointer screen-button" @click="test">演示按钮</div>
                </template>
                <div :class="screenType?'arrow-open':'arrow-close'" @click="changeSwitch">
                    <div class="arrow-container">
                        <i class="el-icon-arrow-down"></i>
                    </div>
                </div>
            </div>
        </div>
        <!--自动展开的搜索列表结束-->

        <!--需要手动点击展开的搜索-->
        <el-collapse-transition>
            <div class="screen-con" v-if="screenType">
            <!--除图片、文件、权重外所有设置在列表展示的字段都会自动生成到搜索栏-->
             <div class="display-flex header-input-item">
                    <div class="header-input-tip">{:__('Id')}</div>
                    <el-input placeholder="请输入{:__('Id')}" v-model="searchForm.id" size="small"></el-input>
                </div>

 <div class="display-flex header-input-item">
                    <div class="header-input-tip">{:__('Name')}</div>
                    <el-input placeholder="请输入{:__('Name')}" v-model="searchForm.name" size="small"></el-input>
                </div>

 <div class="display-flex header-input-item">
                    <div class="header-input-tip">{:__('Director')}</div>
     <div class='control-relative'>
         <el-select v-model="searchForm.director" filterable placeholder="请选择负责人">
             <el-option
                     v-for="item in user"
                     :key="item.id"
                     :label="item.username"
                     :value="item.id">
             </el-option>
         </el-select>
     </div>
<!--                    <el-input placeholder="请输入{:__('Director')}" v-model="searchForm.director" size="small"></el-input>-->
                </div>

 <div class="display-flex header-input-item">
                    <div class="header-input-tip">{:__('安全管理员')}</div>
                     <div class='control-relative'>
                         <el-select v-model="searchForm.manager" filterable placeholder="请输入安全管理员">
                             <el-option
                                     v-for="item in user"
                                     :key="item.id"
                                     :label="item.username"
                                     :value="item.id">
                             </el-option>
                         </el-select>
                     </div>
<!--                    <el-input placeholder="请输入{:__('安全管理员')}" v-model="searchForm.manager" size="small"></el-input>-->
                </div>

<div class="display-flex header-select-item">
                         <div class="header-input-tip">{:__('Createtime')}</div>
                         <el-date-picker v-model="searchForm.createtime" type="daterange" value-format="yyyy-MM-dd HH:mm:ss"
                                    format="yyyy-MM-dd HH:mm:ss" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                                    @change="reqOrderList(0,10)" :picker-options="pickerOptions" align="right" size="small"
                                    :default-time="['00:00:00', '23:59:59']">
                    </el-date-picker>
                     </div>

<div class="display-flex header-select-item">
                         <div class="header-input-tip">{:__('Updatetime')}</div>
                         <el-date-picker v-model="searchForm.updatetime" type="daterange" value-format="yyyy-MM-dd HH:mm:ss"
                                    format="yyyy-MM-dd HH:mm:ss" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                                    @change="reqOrderList(0,10)" :picker-options="pickerOptions" align="right" size="small"
                                    :default-time="['00:00:00', '23:59:59']">
                    </el-date-picker>
                     </div>
            <!--搜索栏字段结束-->
                <div class="header-button-item display-flex">
                    <div class="common-btn" @click="screenEmpty">重置</div>
                    <div class="common-btn header-button-select" @click="reqOrderList(0,10)">筛选</div>
                </div>
            </div>
        </el-collapse-transition>
        <!--需要手动点击展开的搜索结束-->
    </div>
    <div class="custom-table ">
           <div v-loading="tableAjax">
            <el-table ref="multipleTable" :data="data" tooltip-effect="dark" style="width: 100%" border :row-class-name="tableRowClassName" :cell-class-name="tableCellClassName" :header-cell-class-name="tableCellClassName" @row-dblclick="baseAction" @sort-change="sortChange">
                                        <el-table-column min-width="100" label="{:__('Id')}" sortable="custom" prop="id"><template slot-scope="scope"><div class="ellipsis-item"><el-tooltip class="item" effect="light" :content="scope.row.id" placement="top"><el-text>{{scope.row.id}}</el-text></el-tooltip></div></template></el-table-column>

                        <el-table-column min-width="100" label="{:__('Name')}" prop="name"><template slot-scope="scope"><div class="ellipsis-item"><el-tooltip class="item" effect="light" :content="scope.row.name" placement="top"><el-text>{{scope.row.name?scope.row.name.substr(0,18):"-"}}</el-text></el-tooltip></div></template></el-table-column>

                        <el-table-column min-width="100" label="{:__('Director')}" sortable="custom" prop="director"><template slot-scope="scope"><div class="ellipsis-item"><el-tooltip class="item" effect="light" :content="scope.row.directors.username" placement="top"><el-text>{{scope.row.directors.username}}</el-text></el-tooltip></div></template></el-table-column>

                        <el-table-column min-width="100" label="{:__('安全管理人')}" sortable="custom" prop="manager"><template slot-scope="scope"><div class="ellipsis-item"><el-tooltip class="item" effect="light" :content="scope.row.managers.username" placement="top"><el-text>{{scope.row.managers.username}}</el-text></el-tooltip></div></template></el-table-column>

                        <el-table-column min-width="100" label="{:__('Createtime')}" prop="createtime"><template slot-scope="scope"><div class="ellipsis-item">{{moment(scope.row.createtime*1000).format("YYYY-MM-DD HH:mm:ss")}}</div></template></el-table-column>

                        <el-table-column min-width="100" label="{:__('Updatetime')}" prop="updatetime"><template slot-scope="scope"><div class="ellipsis-item">{{moment(scope.row.updatetime*1000).format("YYYY-MM-DD HH:mm:ss")}}</div></template></el-table-column>
                <el-table-column label="操作" min-width="130" fixed="right">
                    <template slot-scope="scope">
                        <div>
                            {if condition = "$auth->check('users/worktype/edit')"}
                            <span class="table-edit-text" @click="baseAction('edit',scope.row.id)">编辑</span>
                            {/if}
                            {if condition = "$auth->check('users/worktype/del')"}
                            <span class="table-delete-text" @click="baseAction('del',scope.row.id)">删除</span>
                            {/if}
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="pagination-container">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="currentPage" :page-sizes="[10, 20, 50, 100,200,500,1000]" :page-size="limit"
                layout="total, sizes, prev, pager, next, jumper" :total="totalPage">
            </el-pagination>
        </div>
    </div>
     </div>
</div>